<template>
	<div class="login-wrap" :style="backgroundDiv">
		<div class="ms-login">
			<div class="ms-title">谁是卧底小程序</div>
				<van-form @submit="onSubmit" class="ms-content">
					<van-field v-model="username"
							   name="用户名"
							   label="用户名"
							   placeholder="用户名"
							   :rules="[{ required: true, message: '请填写用户名' }]"/>
					<van-field v-model="password"
							   type="password"
							   name="密码"
							   label="密码"
							   placeholder="密码"
							   :rules="[{ required: true, message: '请填写密码' }]"/>
					<div style="margin: 16px;" class="login-btn">
						<van-button round block type="info" native-type="submit">提交</van-button>
					</div>
				</van-form>
				<div class="login-tips">
					<van-row type="flex" justify="space-around">
						<van-col span="10">注册账号</van-col>
						<van-col span="6">忘记密码</van-col>
					</van-row>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  data() {
    return {
		backgroundDiv: {
			backgroundImage:'url(' + require('../../../public/images/background.jpg') + ')',
			height:'100vh',
			backgroundRepeat:'no-repeat',
			backgroundSize:'100% 100%'
		},
		username: '',
		password: '',
    };
  },
  mounted(){
     let that = this; 
     //开始背景图片自适应
     that.setImgSize();
     //屏幕尺寸改变的监听方法
     window.onresize = () => {
       that.setImgSize(); 
     }
	},
  methods: {
    formatPrice() {
      return '¥' + (this.goods.price / 100).toFixed(2);
    },
	setImgSize(){
		let height = document.body.clientHeight+"px"; //获取可见区域的高
		let width = document.body.clientWidth+"px";//获取可见区域的宽
		this.$set(this.backgroundDiv,'backgroundSize',width+""+height);
	},
	onSubmit(values) {
	  console.log(values);
	},
    onClickCart() {
      this.$router.push('cart');
    },

    sorry() {
      Toast('暂无后续逻辑~');
    }
  }
};
</script>
<style scoped>
.login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}
.ms-title {
    width: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    color: black;
    border-bottom: 1px solid #ddd;
}
.ms-login {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 350px;
    margin: -190px 0 0 -175px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
}
.login-btn {
    text-align: center;
}
.login-tips {
    line-height: 30px;
}
</style>